﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
    <div class="container-div" id="threedCoordinates-vue">
        <!-- 条件搜索区 -->
        <div style="margin-bottom:20px">
            <el-row>
                <el-col :span="24">
                    <el-date-picker v-model="timeValue"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button style="margin-left: 20px"
                               type="info"
                               icon="el-icon-search"
                               circle="" v-on:click="getHistoryData()"></el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 返回按钮 -->
        <div v-show="showDetail" style="margin-bottom:5px;">
            <el-row>
                <el-col :span="14">
                    <input type="file" id="filePath" v-on:change="selectPathHandler()" style="display:none" webkitdirectory multiple />
                    <el-button type="danger" v-on:click="createExcel">生成Excel</el-button>
                </el-col>
                <el-col :span="4" :offset="6">
                    <el-button icon="el-icon-back" circle type="success" v-on:click="backTotal()"></el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 总览表格 -->
        <div v-show="!showDetail">
            <el-table :data="totalTable"
                      style="width: 100%"
                      border>
                <el-table-column type="index"
                                 label="序号">
                </el-table-column>
                <el-table-column prop="MCode"
                                 label="物料码">
                </el-table-column>
                <el-table-column prop="OccurTime"
                                 label="时间">
                </el-table-column>
                <el-table-column prop="HandleMachine"
                                 label="加工机床">
                </el-table-column>
                <el-table-column prop="data"
                                 label="数据">
                    <template slot-scope="scope">
                        <el-tag :type="resultDataFormatter(scope.row.data)">
                            {{scope.row.data | resultDataFilters}}
                        </el-tag>
                            
                    </template>
                </el-table-column>
                <el-table-column label="详情" fixed="right">
                    <template slot-scope="scope">
                        <a v-on:click="showDetailM(scope)" href="javascript:void(0)">查看</a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页区 -->
        <div v-show="!showDetail">
            <div style="margin:50px 30px;margin-top:20px;">
                <el-pagination background
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="total" v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange"
                               :current-page="pageSize" :page-sizes="[5,10,20]" :page-size="limit">
                </el-pagination>
            </div>
        </div>       
        <!-- 详情表格 -->
        <div v-show="showDetail">

            <!-- 头部信息提示 -->
            <div style="font-size:20px;font-weight:600;margin-top:10px;">
                <el-row>
                    <el-col :span="4">
                        公司
                    </el-col>
                    <el-col :span="20">
                        {{group}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        操作员
                    </el-col>
                    <el-col :span="20">
                        {{currentUser}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        日期
                    </el-col>
                    <el-col :span="20">
                        {{detailDate}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        时间
                    </el-col>
                    <el-col :span="20">
                        {{detailTime}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        物料码
                    </el-col>
                    <el-col :span="20">
                        {{detailMCode}}
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        加工机床
                    </el-col>
                    <el-col :span="20">
                        {{detailHanderMachine}}
                    </el-col>
                </el-row>
            </div>

            <el-table :data="detailTable"
                      style="width: 100%"
                      border>
                <el-table-column type="index"
                                 label="序号">
                </el-table-column>
                <el-table-column prop="params"
                                 label="计算元素">
                </el-table-column>
                <el-table-column prop="criterion"
                                 label="理论">
                </el-table-column>
                <el-table-column prop="real"
                                 label="实际">
                </el-table-column>
                <el-table-column prop="error"
                                 label="误差">
                </el-table-column>
                <el-table-column prop="down_error"
                                 label="下公差">
                </el-table-column>
                <el-table-column prop="top_error"
                                 label="上公差">
                </el-table-column>
                <el-table-column prop="trend"
                                 label="趋势">
                </el-table-column>
                <el-table-column prop="result"
                                 label="结果">
                    <template slot-scope="scope">
                        <el-tag :type="resultFormatter(scope.row.result)">
                            {{scope.row.result}}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <script>
    let app = new Vue({
        el: '#threedCoordinates-vue',
        data: {
            filePath: "C:\\Users\\42199\\Desktop",
            recordId:null,
            timeValue: [],
            totalTable: [],
            detailTable: [
                { params: "外圆直径", criterion: "119.5000", real: null, error: null, down_error: "-0.3400", top_error: "-0.1200", trend: null, result: null },
                { params: "总长", criterion: "355.0000", real: null, error: null, down_error: '-0.5700', top_error: '0.0000', trend: null, result: null },
                { params: "内型深度", criterion: "306.0000", real: null, error: null, down_error: '0.0000', top_error: '0.3200', trend: null, result: null },
                { params: "锥孔深度", criterion: '276.0000', real: null, error: null, down_error: '0.0000', top_error: '1.2300', trend: null, result: null },
                { params: "内腔直径", criterion: '100.0000', real: null, error: null, down_error: '0.0000', top_error: '0.2200', trend: null, result: null },
                { params: "内孔直径_1", criterion: '92.0000', real: null, error: null, down_error: '0.0000', top_error: '0.2200', trend: null, result: null },
                { params: "内孔直径_2", criterion: '106.0000', real: null, error: null, down_error: '0.0000', top_error: '0.0870', trend: null, result: null },
                { params: "内孔直径_3", criterion: '90.0000', real: null, error: null, down_error: '0.0000', top_error: '0.0870', trend: null, result: null },
                { params: "内孔位置尺寸_1", criterion: '4.5000', real: null, error: null, down_error: '0.0000', top_error: '0.3000', trend: null, result: null },
                { params: "内孔位置尺寸_2", criterion: '62.0000', real: null, error: null, down_error: '0.0000', top_error: '0.4500', trend: null, result: null },
                { params: "内孔位置尺寸_3", criterion: '74.0000', real: null, error: null, down_error: '-0.3700', top_error: '0.3700', trend: null, result: null },
                { params: "梯形槽内径", criterion: '95.0000', real: null, error: null, down_error: '0.0000', top_error: '0.3500', trend: null, result: null },
                { params: "外螺纹位置尺寸", criterion: '26.5000', real: null, error: null, down_error: '0.0000', top_error: '0.2100', trend: null, result: null },
                { params: "退刀槽直径", criterion: '102.0000', real: null, error: null, down_error: '-0.5400', top_error: '0.0000', trend: null, result: null },
                { params: "退刀槽宽度", criterion: '7.0000', real: null, error: null, down_error: '0.0000', top_error: '0.3000', trend: null, result: null },
                { params: "浅孔深度", criterion: '31.0000', real: null, error: null, down_error: '0.0000', top_error: '0.1800', trend: null, result: null },
                { params: "内控对外圆同轴度_1", criterion: '0.0000', real: null, error: null, down_error: '0.2000', top_error: '0.2000', trend: null, result: null },
                { params: "内控对外圆同轴度_2", criterion: '0.0000', real: null, error: null, down_error: '0.0800', top_error: '0.0800', trend: null, result: null },
                { params: "端面对外圆垂直度", criterion: '0.0000', real: null, error: null, down_error: '0.0800', top_error: '0.0800', trend: null, result: null },
                { params: "外螺纹对外圆同轴度", criterion: '0.0000', real: null, error: null, down_error: '0.2000', top_error: '0.2000', trend: null, result: null },
                { params: "内螺纹对外圆同轴度", criterion: '0.0000', real: null, error: null, down_error: '0.1500', top_error: '0.1500', trend: null, result: null },
            ],
            showDetail: false,
            pageSize: 1,  // 当前页码
            limit: 5,  //每页数据条数
            total: 0,
            group:"上海中车瑞伯德智能系统股份有限公司",
            currentUser: "admin", // 当前用户
            detailDate: null,   // 详情日期
            detailTime: null,   // 详情时间
            detailMCode: null,  // 详情物料码
            detailHanderMachine:null,   // 详情加工机床
        },
        methods: {
            // 获取历史数据
            getHistoryData() {
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                const searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                const searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetThreedCoordinates")'
                axios.get(url, {
                    params: {
                        stime: searchStart,
                        etime: searchEnd,
                        pageSize: this.pageSize,
                        limit: this.limit
                    }
                }).then(res => {
                    console.log(res);
                    let data = res.data.result;
                    this.total = res.data.total
                    if (data.length!=0) {
                        this.totalTable = [];
                        for (let i = 0; i < data.length; i++) {
                            let occurTime = data[i].OccurTime + "";
                            let _time = occurTime.split("T")[0] + " " + occurTime.split("T")[1].split("+")[0]
                            this.totalTable.push({
                                id:data[i].Id,
                                OccurTime: _time,
                                data: data[i].Result,
                                MCode: data[i].MCode,
                                HandleMachine:data[i].HandleMachine
                            })
                        }
                    } else {
                        this.$message({
                            showClose: true,
                            duration: 2000,
                            message: '没有记录数据！',
                            type: 'warning',
                            offset: 80
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！获取历史数据失败：' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 查看测量数据详情
            showDetailM(scope) {
                let row = scope.row;
                this.detailMCode = row.MCode;
                this.detailHanderMachine = row.HandleMachine;
                this.detailDate = row.OccurTime.split(" ")[0];
                this.detailTime = row.OccurTime.split(" ")[1];
                let data = row.data.split("/")
                for (let i = 0; i < data.length; i++) {
                    if (data[i] == "") {
                        continue;
                    }
                    let detailData = data[i].split(":");
                    let detailResult = "";
                    if (detailData[4] == "406") {
                        detailResult = "不合格";
                    }
                    if (detailData[4] == "336") {
                        detailResult = "合格";
                    }
                    this.detailTable[i].real = detailData[1];
                    this.detailTable[i].error = detailData[3];
                    this.detailTable[i].trend = detailData[2];
                    this.detailTable[i].result = detailResult;
                }
                this.recordId = null;
                this.recordId = this.totalTable[scope.$index].id;
                this.showDetail = true;
            },
            // 返回查看总览
            backTotal() {
                this.showDetail = false;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = 1;
                this.limit = val;
                this.getHistoryData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageSize = val;
                this.getHistoryData();
            },
            // 数据结果格式过滤
            resultDataFormatter(data) {
                let result = "info"
                if (data.indexOf(":406/")==-1) {
                    result = "success";
                } else {
                    result = "danger";
                }
                return result;
            },
            // 误差数据结果类型过滤
            resultFormatter(data) {
                let result = "info"
                if (data=="合格") {
                    result = "success";
                } else {
                    result = "danger";
                }
                return result;
            },
            // 生成Excel
            createExcel() {
                //console.log("执行生成")
                //document.getElementById("filePath").click();
                console.log(this.recordId)
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/createThreedCoordinatesExcel")'
                axios.get(url,{
                    params: {
                        group: this.group,
                        currentUser: this.currentUser,
                        date: this.detailDate,
                        time: this.detailTime,
                        filePath: this.filePath,
                        recordId: this.recordId
                    }
                }).then(res => {
                    if (res.data.result) {
                        this.$notify({
                            title: 'Success',
                            message: "Excel导出成功",
                            duration: 2000,
                            type: 'success'
                        })
                    }
                    console.log(res)
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！生成Excel错误：' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 生成文件路径选择
            selectPathHandler() {
                console.log("执行")
                let filepath = document.getElementById("filePath")
                console.log(filepath)
                console.dir(filepath)
                console.log(filepath.files[0].path)
            }
        },
        filters: {
            resultDataFilters(data) {
                if (data.indexOf(":406") == -1) {
                    return "合格";
                } else {
                    return "不合格";
                }
            }
        },
        mounted() {
            // 初始化查询
            let beforeTime = new Date().getTime() - (1000 * 60 * 60 * 24 * 7);
            let beforeDate = new Date(beforeTime);
            this.timeValue.push(new Date());
            this.timeValue.push(new Date());
            this.getHistoryData();
        }
    })
    </script>

